<template>
	<div class="box">
		<div class="return" @click="goBack">
			<img src="../assets/return.png" alt="">
		</div>
		<tab :line-width=1>
			<tab-item v-for="(item, index) in list4" :key="index" @click.native='look(index)'> {{item}}</tab-item>
		</tab>
		<p class="time">10月13日08:09</p>
		
		<ul class="wrap" v-if="isShow">
			<li v-for="i in 3">
				通知{{i}}
			</li>
		</ul>
		<ul class="wrap" v-else>
			<li v-for="i in 3">消息{{i}}</li>
		</ul>
	</div>
</template>
<script>
	import {
		Tab,
		TabItem
	} from 'vux'
	export default {
		components: {
			Tab,
			TabItem
		},
		data() {
			return {
				list4: ['通知', '消息'],
				isShow: true
			}
		},
		created() {

		},
		mounted() {


		},
		methods: {
			look(index) {
				this.isShow = index ? false : true;

			},
			goBack() {
				this.$router.push({path:'/home',query:{show:1}});
			},
		},


	}
</script>

<style lang="less" scoped="scoped">
	// color: rgb(46,133,244);
			.return {
				width: 32px;
				height: 32px;
				position: absolute;
				bottom: 10px;
				left: 10px;
	
				img {
					width: 100%;
					height: 100%;
				}
			}
	.time{ text-align: center;font-size: 12px;color: #666;;}
	.wrap {
		width: 100%;
		height: 100%;
		list-style: none;
		
		li {
			background: #FFF;
			height: 90px;
			padding: 10px;
    margin: 2px 0;



		}
	}
</style>
